<template>
  <div class="sos">
    <!-- 文本 -->
    <div class="text">
       <div class="safety">- 安全求救服务 -</div>
       <div class="relation">求助紧急联系人</div>
    </div>

    <div class="icon">
      <div class="time">
          <i class="iconfont icon-iconfont-5"></i>
          <div>定时求助</div>
      </div>

      <div class="once">
          <i class="iconfont icon-lvzhou_renzhengfangshi_yijianrenzheng"></i>
          <div>一键求助</div>
      </div>

        <div class="video">
          <i class="iconfont icon-shipin"></i>
          <div>视频求助</div>
      </div>
    </div>

    <!-- 求助指南 -->
    <div class="guide" @click="getGuide">求助指南</div>

    <!-- 关闭的图标 -->
    <div class="close">
       <i class="iconfont icon-fork" @click="toIndex"></i>
    </div>

    <!-- <my-nav></my-nav> -->
  </div>
</template>

<script>
// import MyNav from '@/components/MyNav'

export default {

  components: {
    // MyNav
  },
  methods: {
    getGuide () {
      console.log('求助指南')
    },
    toIndex () {
      this.$router.push({
        name: 'index'
      })
    }
  }
}
</script>

<style scoped>
.text{
  margin-top:8rem;
  align-items: center;
  text-align: center;

}
.text .safety{
  text-align: center;
  font-size: 0.7rem;
  width: 100%;
  height: 100%;
}
.text .relation{
  text-align: center;
  font-size: 0.5rem;
  color:rgb(179, 174, 174);
  width: 100%;
  height: 100%;
}
.icon{
  text-align: center;
  margin-top:8%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.icon .time .iconfont{
  font-size: 1.2rem;
  color:rgb(116,167,236)
}
.icon .video .iconfont{
  font-size: 1.2rem;
  color:rgb(132,211,236)
}
.icon .once .iconfont{
  font-size: 1.4rem;
  color:rgb(219,123,135)
}
.guide{
  margin-top: 2.2rem;
  text-align: center;
  font-size: 0.55rem;
}
.close{
  margin-top: 0.2rem;
  text-align: center;
  font-size: 0.6rem;
}

</style>
